<template>
    <div class="register">
        <h1>填写个人信息</h1>
        <div class="RegForm">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name" readonly>
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="ruleForm.gender" placeholder="请选择你的性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生年月" required>
                    <el-col :span="11">
                        <el-form-item prop="birth">
                            <el-date-picker v-model="ruleForm.birth" type="month" placeholder="选择出生年月"
                                value-format="yyyy.MM">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="小区住址" prop="address">
                    <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="Regchang">
            <el-button type="warning" round @click="Register('ruleForm')">
                <span>注册</span>
            </el-button>
        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                name: '',
                password: '',
                gender: '',
                birth: '',
                phone: '',
                address: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择你的性别', trigger: 'change' }
                ],
                birth: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入小区住址', trigger: 'blur' },
                    { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        this.ruleForm.username = JSON.parse(this.$route.query.nameReg ? this.$route.query.nameReg : '');
        this.ruleForm.password = JSON.parse(this.$route.query.pwdReg ? this.$route.query.pwdReg : '');
    },
    methods: {
        all() {
            axios.get('http://127.0.0.1/user').then(res => {
                // console.log(res.data);
            }).catch(err => {
                console.log("获取数据失败" + err);
            })
        },
        Register(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm);
                    axios.get('http://127.0.0.1/add', {
                        params: {
                            username: this.ruleForm.username,
                            name: this.ruleForm.name,
                            password: this.ruleForm.password,
                            address: this.ruleForm.address,
                            gender: this.ruleForm.gender,
                            birth: this.ruleForm.birth,
                            phone: this.ruleForm.phone,
                        }
                    }).then(res => {
                        console.log(res.data);
                        this.all()
                    }).catch(err => {
                        console.log("获取数据失败" + err);
                    })
                    this.$alert('注册成功', {
                        confirmButtonText: '去登录',
                    })
                    this.$router.push('/login')
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>
.register {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: linear-gradient(#99CCFF, #FFCC99, #FFCCCC);
}

.register h1 {
    text-align: center;
    margin: 10px 50px 20px 0;
}

.register .RegForm {
    margin: 0 auto;
    padding-right: 50px;
    width: 500px;
}

.register .RegForm /deep/.el-form-item__label {
    font-size: 18px;
}

.register .RegForm /deep/.el-form-item__label::after {
    content: "：";
    font-weight: bold;
}

.register .Regchang {
    text-align: center;
    margin-right: 30px;
}

.register .Regchang span {
    font-size: 20px;
    font-weight: bold;
}
</style>